<template>
  <!-- 简洁模式 -->
  <div :class="simpleWrapperClasses" v-if="simple">
    <div :class="simplePrevClasses">
      <a @click.stop="prev">
        <Icon
          :size="14"
          :type="'chevron-left'">
        </Icon>
      </a>
    </div>
    <e-select
      v-model="currentPageStr"
      :size="isSmall ? 'small' : 'middle'"
      :options="pageNumOptions"
      :transfer="transfer"
      :transfer-class-name="transferClassName"
      @on-change="onPage"
    >
      <e-option
        v-for="item in pageNumOptions"
        :key="item"
        :label="item + '/' + allPages"
        :value="item"
      >
        {{ item }}
      </e-option>
    </e-select>
    <div :class="simpleNextClasses">
      <a @click.stop="next">
        <Icon
          :size="14"
          :type="'chevron-right'">
        </Icon>
      </a>
    </div>
  </div>

  <div :class="wrapperClasses" v-else>
    <options
      v-if="!isSmall"
      :page-size="pageSize"
      :page-size-opts="pageSizeOpts"
      :total="total"
      :show-total="showTotal"
      :show-sizer="showSizer"
      @on-size="onSize"
      :transfer="transfer"
      :transfer-class-name="transferClassName"
    ></options>
    <ul class="haloe-page__list">
      <li
        :class="prevClasses"
        @click.stop="prev"
      >
        <a><Icon
          :size="14"
          type="chevron-left">
        </Icon></a>
      </li>
      <!--第一个页-->
      <li
        title="1"
        :class="[prefixCls + '-item',{[`${prefixCls}-item-active`]:currentPage === 1}]"
        @click.stop="changePage(1)"><a>1</a></li>
      <!--快速前进5页-->
      <li
        v-if="currentPage > 5"
        :class="[prefixCls+'-item',prefixCls + '-item-jump-prev']"
        @click.stop="fastPrev">
        <i class="haloe-icon haloe-icon-chevron-left"></i>
        <i class="haloe-icon haloe-icon-more"></i>
      </li>
      <!--如果当前页是第5页，这里显示第二页-->
      <li
        :title="currentPage - 3"
        v-if="currentPage === 5"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
      <li
        :title="currentPage - 2"
        v-if="currentPage - 2 > 1"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
      <li
        :title="currentPage - 1"
        v-if="currentPage - 1 > 1"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
      <li
        :title="currentPage"
        v-if="currentPage != 1 && currentPage != allPages"
        :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
      <li
        :title="currentPage + 1"
        v-if="currentPage + 1 < allPages"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
      <li
        :title="currentPage + 2"
        v-if="currentPage + 2 < allPages"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
      <li
        :title="currentPage + 3"
        v-if="allPages - currentPage === 4"
        :class="[prefixCls + '-item']"
        @click.stop="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
      <li
        v-if="allPages - currentPage >= 5"
        :class="[prefixCls+'-item',prefixCls + '-item-jump-next']"
        @click.stop="fastNext">
        <i class="haloe-icon haloe-icon-chevron-right"></i>
        <i class="haloe-icon haloe-icon-more"></i>
      </li>
      <li
        :title="allPages"
        v-if="allPages > 1"
        :class="lastPageClasses"
        @click.stop="changePage(allPages)"><a>{{ allPages }}</a></li>
      <li
        :class="nextClasses"
        @click.stop="next"
      >
        <a><icon
          :size="14"
          :type="'chevron-right'">
        </icon></a>
      </li>
    </ul>
    <jump-page
      v-show="allPages>5 && showElevator"
      :current="currentPage"
      :all-pages="allPages"
      :size="isSmall?'small':''"
      @onPage="onPage"></jump-page>
  </div>
</template>

<script setup>
import { ref, defineProps, computed,defineEmits,toRefs,watch } from 'vue'
import { oneOf } from '../../utils/assist';
import Options from './options.vue'
import JumpPage from './jumpPage.vue'
import Icon  from '../icon';
import eSelect from "../select"
const props = defineProps({
  current: { // 设置当前显示页码
    type: Number,
    default: 1
  },
  total: { //总数据行数
    type: Number,
    default: 0,
    validate:(value)=>{
      return value >=0
    }
  },
  pageSize: { // 每页显示数量
    type: Number,
    default: 10
  },
  pageSizeOpts:{ // 用户配置每页条数切换
    type:Array,
    default: ()=> [10,20,30,40]
  },
  size: { // 是否精简版
    validator (value) {
      return oneOf(value, ['small']);
    }
  },
  // 显示电梯，可以快速切换到某一页
  showElevator: {
    type: Boolean,
    default: true,
  },
  // 显示分页，用来改变page-size
  showSizer: {
    type: Boolean,
    default: true,
  },
  // 显示总数
  showTotal: {
    type: Boolean,
    default: true,
  },
  // 极简版
  simple: {
    type: Boolean,
    default: false,
  },
  //select transfer
  transfer:{
    type: Boolean,
    default:false
  },
  transferClassName:String
})

const {current,total,pageSize,pageSizeOpts,size} = toRefs(props)

// 注册事件
const emits = defineEmits(["update:current","on-change","on-page-size-change", "update:pageSize", "on-prev","on-next"])

// 样式前缀
const prefixCls = ref("haloe-page")

// 当前页码，Number类型
let currentPage = ref(current.value)

// 当前页码，String类型
let currentPageStr = ref(current.value + '')

// 增加对current的监听
watch(current,(value)=>{
  currentPage.value = value
})

// 增加对current的监听
watch(currentPage,(value)=>{
  currentPageStr.value = value + ''
})


//当前每页显示数量
let currentPageSize = ref(pageSize.value)

// 页码总数
let allPages = computed(()=>{
  const allPage = Math.ceil(total.value / currentPageSize.value);
  return (allPage === 0) ? 1 : allPage;
})

// 极简分页符--所有页码选项
const pageNumOptions = computed(() => {
  return [...Array(allPages.value).keys()].map(i => i + 1 + '')
})

const isSmall = computed(()=>{
  return !!size.value
})

/**
 *修改显示的页
 * @param {*} page
 */
function changePage(page){
  if (currentPage.value !== page) {
    currentPage.value = page;
    emits('update:current', page);
    emits('on-change', page);
  }
}

/**
 * 上一页
 */
function prev(){
  if(currentPage.value > 1){
    // currentPage.value--
    const current=currentPage.value
    changePage(current-1)
    emits("on-prev",current-1)
  }
}

/**
 * 下一页
 */
function next(){
  if(currentPage.value < allPages.value){
    // currentPage.value++
    const current=currentPage.value
    changePage(current+1)
    emits("on-next",current+1)
  }
}

/**
 * wrapper元素class
 */
let wrapperClasses = computed(()=>{
  return [
    `${prefixCls.value}`,
    {'mini': !!size.value}
  ]
})

// 极简分页符----wrapper元素class
let simpleWrapperClasses = computed(()=>{
  return [
    `${prefixCls.value}`,
    `${prefixCls.value}-simple`,
    {'mini': !!size.value},
  ]
})

// 上一页按钮样式
let prevClasses = computed(()=>{
  return [
    `${prefixCls.value}-prev`,
    {
      [`${prefixCls.value}-disabled`] : currentPage.value === 1
    }
  ]
})

// 下一页按钮样式
let nextClasses = computed(()=>{
  return [
    `${prefixCls.value}-next`,
    {
      [`${prefixCls.value}-disabled`]:currentPage.value === allPages.value
    }
  ]
})

// 极简分页符----上一页按钮样式
let simplePrevClasses = computed(()=>{
  return [
    `${prefixCls.value}-simple-prev`,
    {
      [`${prefixCls.value}-simple-disabled`] : currentPage.value === 1
    }
  ]
})

// 极简分页符----下一页按钮样式
let simpleNextClasses = computed(()=>{
  return [
    `${prefixCls.value}-simple-next`,
    {
      [`${prefixCls.value}-simple-disabled`]:currentPage.value === allPages.value
    }
  ]
})

/**
 * 最后一页样式
 */
let lastPageClasses = computed(()=>{
  return [
    `${prefixCls.value}-item`,
    {
      [`${prefixCls.value}-item-active`]: currentPage.value === allPages.value
    }
  ];
})

/**
 * 跳转到指定页码
 * @param {} page
 */
function onPage(page){
  if (currentPage.value != parseInt(page)) {
    currentPage.value = parseInt(page);
    emits('update:current', parseInt(page));
    emits('on-change', parseInt(page));
  }
}

/**
 * 重新选择每页显示行数回调
 * @param {*} pageSize
 */
function onSize(pageSize){
  currentPageSize.value = pageSize;
  emits('update:pageSize', pageSize);
  emits('on-page-size-change', pageSize);
  changePage(1);
}

// 

const fastPrev=()=>{
  // if()

  const page=currentPage.value-5
  if(page>0){
    changePage(page)
  }else{
    changePage(1)
  }
}

const fastNext=()=>{
  const page=currentPage.value+5
  if(page>allPages.value){
    changePage(allPages.value)
  }else{
    changePage(page)
  }
}
</script>


